與傳統的輪播概念一樣

分成三個部分

能夠左右點擊的navigator

底部隨著畫面改動

而active的dot

最後就是slideshow

首先第一步得先做一個容器

並把所有圖片排列成一長條

每一張圖片變動

概念都是以整個畫面的left:n*-100%再做滑動

/* width: 500%; */
height: auto;
overflow: hidden;
display: flex;
justify-content: start;
position: relative;
left: 0;
transition: 0.5s all ease-in-out;

為了能夠未來增加圖片數量(這邊預設為5張，註:此處的active為slideIndex的意思)

此處的width在react內控制

const loop={left:(active-1)*(-100)+'%',width:picData.map(f=>f.id).length*100+'%'};

圖片排列結束後

在ui上印出圖片

<div className={style.slideshowSlidesWrap} style={loop}>
    {picData.map(pd=>(
        <a href={pd.link2} className={style.slide} target="_blank" key={pd.id}><img src={pd.link1} alt={pd.alt}/></a>
    ))}
</div>

接著準備左右點擊的navigator

此處準備一個handleClick事件於navigator上

並取消點擊連結事件

const handlePrev=(e)=>{
    e.preventDefault();
    active>=2 ?setActive(c=>c-1):setActive(picData.map(f=>f.id).length);
};
const handleNext=(e)=>{
    e.preventDefault();
    active<=picData.map(f=>f.id).length-1? setActive(c=>c+1):setActive(1);        
};

在此處首先是定義useState(active)作為slidepic的index

預設起始值為1，useState(1)

並隨著點擊前進或是後退而+1、-1

到了第五張無法前進時

再點擊，會回到第一張

第一張無法後退時

再點擊，會變到第五張

此處考慮到未來添加圖片的不確定性

圖片的連結是用JSON檔來描述

於是使用picData.map(f=>f.id)來計算出

加入圖片連結的數量來定義總圖片數

接下來定義圖片下方的dot

這邊必須在dot的container中

加入判斷式

{picData.map((dot)=>(
    dot.id = = active?<div className={`${style.dot} ${style.active}`} key={dot.id} onClick={()=>{handlePic(dot.id)}}></div> : 
                      <div className={style.dot} key={dot.id} onClick={()=>{handlePic(ki.id)}}></div>
))}

這邊的解釋是

loop出pic的數量並計算出相對應的dot數(id:1~5與useState(active)相對應)

若dot的id等於useState(active)

class會加入active這個class使dot變色

其他不相等於useState(active)的class

則會維持原本的顏色

每個dot也會加入相對應id的handleClick事件

點擊dot會使圖片跳至相對應id的圖片

const handlePic=(id)=>{
    setActive(id);
};

最後若是想加入秒數輪播的話

這邊使用setInterval加入在useEffct內

useEffect(()=>{
    let loop=setInterval(()=>{
        active<=picData.map(f=>f.id).length-1?setActive(active+1):setActive(1);
        },3000);
    return ()=>clearInterval(loop);
},[active]);

此處須注意兩點

必須做一個return unmount的動作

否則此處active會一直疊加上去

最後輪播會卡住

另外在dependencies需加入active

偵測active改變時

畫面再重新render

若沒有加入active

此處畫面不會改變

最後setInterval內放入一個三元判斷式

若這個active小於或等於loop出來的id數量

active會繼續+1往前進

若是大於loop的數量

則active回到1